<template>
    <a-table :class="isCf==3?'tableWidth_2':'tableWidth_1'" :scroll="{ x: 'max-content' }" :pagination="false" :row-selection="rowSelection"
        :columns="columns" :data-source="dataSource">
        <!-- <template #bodyCell="{ column, text }">
              <template v-if="column.dataIndex === 'name'">
                <a>{{ text }}</a>
              </template>
            </template> -->
        <template #title>
            <div class="title">
                {{title}}
                <span>单位：{{unit}}</span>
            </div>

        </template>
        <template #headerCell="{ column }">
            <div>
                {{ column.title }}
            </div>
        </template>
    </a-table>
</template>

<script setup lang='ts'>
import { TableProps } from 'ant-design-vue';
import { Key } from 'ant-design-vue/lib/_util/type';
import { ref, watch } from 'vue';
export interface DataType{
    Id?:number
    key?:number
    Client: string,
    HardAndSoft: number,
    Soft: number,
    Otp: number,
    Others: number,
    Total: number,
}

const props = defineProps(['columns', 'dataSource','title','unit','isCf'])

const emits = defineEmits(['getCheckedDataList'])

// 用来存储CF表筛选出的数据
let checkedDataList = ref<DataType[]>([])

const rowSelection: TableProps['rowSelection'] = {
    onChange: (selectedRowKeys: Key[], selectedRows: DataType[]) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        checkedDataList.value = selectedRows
        // console.log(checkedDataList.value);
        
    },
    // getCheckboxProps: (record: DataType) => ({
    //     disabled: record.Client === '总计', // Column configuration not to be checked
    //     name: record.Client,
    // }),
};

watch(()=>checkedDataList.value.length,(newVal)=>{
    
    if (!newVal) {
        // console.log(87878787);
        emits('getCheckedDataList',props.dataSource,props.isCf)
    }else{
        emits('getCheckedDataList',checkedDataList.value,props.isCf)
    }
},{deep:true})
</script>

<style lang="less" scoped>
.tableWidth_1 {
    width: 47%;
}
.tableWidth_2 {
    width: 100%;
}
.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

</style>